<template>
  <div class="wrapper">
    <div id="myChart"></div>
  </div>
</template>

<script>
const testurl = "http://"

// import echarts from 'echarts'
import { daofangkehutongji } from "@/api/demo.js";
export default {
  
  components: {},
  props: {},
  data() {
    return {
      //  配置数据
      options1: {
        color: ["#2f89cf"], // 柱子的颜色
        tooltip: {
          trigger: "axis", // 触发类型  柱子 或者  坐标触发
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // 防止鼠标事件 频繁触发 防止抖动
          transitionDuration: 0,
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10%",
          right: "0%",
          bottom: "5%",
          containLabel: true, // 可以理解为 y轴在 图表里面
        },
        xAxis: [
          {
            type: "category", // x 轴的类型
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              // 坐标轴刻度相关
              alignWithLabel: true, // 这个 false 和 true 有什么区别????
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ", // x 轴下面的 文字颜色
              fontSize: "8", // // x 轴下面的 字体大小
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            data: [
              23,23,42,23,23,23,52,32,53,23,55,13
              ],
            itemStyle: {
              // 修改柱子渐变颜色
              normal: {
              // 修改柱子圆角
              barBorderRadius: [2, 2, 0, 0],
                // 四个属性: 右下左上
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#194676" // 0% 处的颜色
                },  {
                  offset: 1,
                  color: "#60a6fb" // 100% 处的颜色
                }], false)
              }
            },
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    async drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.options1);
        //  自己的代码    设备异常-------------------------------------
      const { data: res } = await daofangkehutongji();
      console.log("到访客户统计分析",res)
      console.log("到访客户统计分析",res.result)
      console.log("到访客户统计分析",res.result.apr)
      var shuju=[]     
      if(res.result.apr==='0'){
        shuju.push(5)
      }else{
        shuju.push(res.result.apr)
      }
  
     if(res.result.aug==='0'){
        shuju.push(2)
      }else{
        shuju.push(res.result.aug)
      }
      
       if(res.result.dece==='0'){
        shuju.push(4)
      }else{
        shuju.push(res.result.dece)
      }

        if(res.result.feb==='0'){
        shuju.push(4)
      }else{
        shuju.push(res.result.feb)
      }

       if(res.result.jan==='0'){
        shuju.push(1)
      }else{
        shuju.push(res.result.jan)
      }

       if(res.result.july==='0'){
        shuju.push(2)
      }else{
        shuju.push(res.result.july)
      }

         if(res.result.june==='0'){
        shuju.push(6)
      }else{
        shuju.push(res.result.june)
      }

        if(res.result.mar==='0'){
        shuju.push(4)
      }else{
        shuju.push(res.result.mar)
      }

         if(res.result.may==='0'){
        shuju.push(5)
      }else{
        shuju.push(res.result.may)
      }

             if(res.result.nov==='0'){
        shuju.push(2)
      }else{
        shuju.push(res.result.nov)
      }

               if(res.result.oct==='0'){
        shuju.push(6)
      }else{
        shuju.push(res.result.oct)
      }
      
        if(res.result.sept==='0'){
        shuju.push(3)
      }else{
        shuju.push(res.result.sept)
      }

      console.log("数据",shuju)
      
      if (res.code == 200) {
        // res.result   是一个数组    数量 和   名字
        // console.log(res.result);
        // var yichangNum = res.result.map((e) => {
        //   return e.deviceNum;
        // });
        // var yichangName = res.result.map((e) => {
        //   return e.deviceName;
        // });
        myChart.setOption({
          series: [{ data: shuju }],
          // xAxis: [{ data: yichangName }],
        });
        // console.log("成功获取222 --设备异常  数据");
      }


      // myChart.on("click", function(e){
      //   window.open(e.data.url)
      // })




      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart {
  width: 98%;
  height: 83%;
  /* background-color: pink; */
}
</style>